<template>
  <h1>这是赵嘉豪的页面</h1>
  <to-do-header @addToDo="addToDo"></to-do-header>
  <to-do-main :list="showList" @delTodo="delTodo"></to-do-main>
  <to-do-footer :lastLength="lastLength" :status="status" @updateStatus="updateStatus"></to-do-footer>
</template>

<script setup>
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import ToDoFooter from './components/ToDoFooter.vue';
import { ref, computed } from 'vue';
const list = ref([
  { id: 1, name: "学习Vue3", done: false },
  { id: 2, name: "跑步", done: true },
])
function addToDo(name) {
  if (name != "") {
    list.value.push({ name, done: false, id: Math.floor(Math.random() * 100) });
  }
  else {
    alert("任务不能为空")
  }
}
function delTodo(id) {
  //filter 遍历数组，id!=item.id pop()  shift()
  list.value = list.value.filter((item) => item.id != id);
}
// 计算未完成任务总数
const lastLength = computed(() => {
  return list.value.filter((item) => !item.done).length;
});
// 定义任务状态
const status = ref("所有");
const showList = computed(() => {
  if (status.value == "所有") {
    return list.value
  }
  if (status.value == "待办") {
    return list.value.filter(item => !item.done);
  }
  if (status.value == "完成") {
    return list.value.filter(item => item.done);
  }
});
function updateStatus(statuss){
  status.value = statuss
}
</script>

<style></style>